<template>
  <a-space size="middle" class="inputGroup" v-for="(item, i) in extend" :key="i">
    <a-input placeholder="Name" v-model:value="item.name"></a-input>
    <a-input placeholder="Value" v-model:value="item.value"></a-input>
    <a-button type="dashed" danger @click="remove(i)">
      <template #icon>
        <DeleteOutlined />
      </template>
    </a-button>
  </a-space>
  <a-button type="dashed" block @click="add">
    <template #icon>
      <PlusOutlined />
    </template>
    增加数据
  </a-button>
</template>

<script setup lang="ts">
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue'
import type { GeneralKeyValue } from '@/constants/general'
import { computed } from 'vue'

const props = defineProps({
  value: {
    type: Array<GeneralKeyValue>,
    default: () => [],
  },
})

const emits = defineEmits(['update:value'])

const extend = computed({
  get: () => {
    return props.value
  },
  set: (val) => {
    emits('update:value', val)
  },
})

const add = () => {
  extend.value.push({ name: '', value: '' })
}

const remove = (i: number) => {
  extend.value.splice(i, 1)
}
</script>

<style lang="less" scoped>
.inputGroup {
  width: 100%;
  margin-bottom: 1rem;

  &:deep(*) {
    &:nth-child(1),
    &:nth-child(2) {
      flex: 1;
    }
  }
}
</style>
